<template>
	<Pannel navbar title="党员信息">
		<view class="continer">
			<view class="bg"></view>

			<view class="continer-inenr">
				<view class="card-box-1">
					<view class="icon-box">
						<image class="image-box" :src="icon1" mode="scaleToFill" />
					</view>
					<view class="title">医药高新区(高港区)四支部</view>
					<view class="list">
						<view class="item item-icon">
							<view class="num-icon">
								<view class="num">26</view>
								<view class="icon iconfont icon-youyi"></view>
							</view>
							<view class="text">党员总数</view>
						</view>
						<view class="item">
							<view class="num">26</view>
							<view class="text">今日新增</view>
						</view>
						<view class="item item-icon">
							<view class="num-icon">
								<view class="num">26</view>
								<view class="icon iconfont icon-youyi"></view>
							</view>
							<view class="text">全年总分</view>
						</view>
					</view>
				</view>
				<view class="card-box-2">
					<CardHeaderBox title="党费收缴与支出分析">
						<view class="card-content">
							<view class="left-box">
								<view class="icon-box">
									<image class="image-box" :src="icon2" mode="scaleToFill" />
								</view>
								<view class="msg">
									<view class="num">12000</view>
									<view class="text">党员缴费</view>
								</view>
							</view>
							<view class="right-box">
								<view class="msg">
									<view class="text">支出</view>
									<view class="num">12000</view>
								</view>
								<view class="msg">
									<view class="text">结余</view>
									<view class="num">12000</view>
								</view>
							</view>
						</view>
						<!-- 折线图区域 -->
						<view class="line-wrap">
							<EchartsLine></EchartsLine>
						</view>
					</CardHeaderBox>
				</view>
				<view class="card-box-3">
					<CardHeaderBox title="党员结构分析">
						<view class="card-inner-box">
							<Tabs :lists="['年龄', '学历', '性别']"></Tabs>

							<EchartsPie></EchartsPie>
						</view>
					</CardHeaderBox>
				</view>
				<view class="card-box-4">
					<CardHeaderBox title="党员获奖排行">
						<view class="card-inner-box">
							<Tabs :lists="['本职工作获奖', '民革工作获奖']"></Tabs>

							<view class="list">
								<view class="header-box">
									<view class="header-item">排名</view>
									<view class="header-item">用户</view>
									<view class="header-item">得分</view>
								</view>
								<view class="list-box">
									<ListItem1 v-for="(item, index) in dangYuanJiaoFeiList.values" :key="index" :item="item" :index="index"></ListItem1>
								</view>
							</view>
						</view>
					</CardHeaderBox>
				</view>
			</view>
		</view>
	</Pannel>
</template>

<script>

import RenShu from '../../components/renshu/renshu.vue';
import JiaoFei from '../../components/jiaofei/jiaofei.vue';
import Sex from '../../components/sex/sex.vue';
import Education from '../../components/education/education.vue';
import {
	payHomeInfo,
	partyMemberHomeYearInfo,
	sex,
	education
} from '../../api/index.js'


import icon1 from '@/utils/base64/dyxi/icon_1.js';
import icon2 from '@/utils/base64/dyxi/icon_2.js';
import Pannel from '../../components/Pannel/Pannel.vue';
import CardHeaderBox from '../../components/CardHeaderBox/CardHeaderBox.vue';
import EchartsPie from '../Echarts/Pie.vue';
import EchartsLine from '../Echarts/Line.vue';
import ListItem1 from '../comnponents/ListItem1.vue';
import Tabs from '../../components/Tabs/Tabs.vue';

export default {
	components: {
		Tabs,
		CardHeaderBox,
		Pannel,
		EchartsPie,
		EchartsLine,
		ListItem1,
		JiaoFei,
		RenShu,
		Sex,
		Education

	},
	data() {
		return {

			timeYear: '',

			selectYear: 3,
			rangeYears: [],
			dangYuanJiaoFeiList: '',
			dangYuanJiaoFeiInfo: '',
			dangYuanRenShuInfo: '',
			sexInfo: '',
			educationInfo: '',
			hasAdmin: uni.getStorageSync('hasAdmin'),
			chartData: {
        series: [
          { name: "分类A", data: 30 },
          { name: "分类B", data: 20 },
          { name: "分类C", data: 50 }
        ]
      },
      options: {
        color: ["#1890FF", "#91CB74", "#FAC858"], // 饼图颜色
        legend: {
          show: true,
          position: "bottom"
        },
        extra: {
          pie: {
            label: {
              show: true,
              formatter: "{name|{name}}\n{percent|{percent}}%",
              rich: {
                name: { fontSize: 12 },
                percent: { fontSize: 12 }
              }
            }
          }
        }
      }

		}
	},
	computed: {
		icon1() {
			return icon1
		},
		icon2() {
			return icon2
		}
	},
	onShow() {
		this.getJiaoFeiData()
		this.getRenShuData()
		this.getSexData()
		this.getEducationxData()


	},
	onLoad() {
		this.timeYear = this.$store.state.year
		this.rangeYears = this.$store.state.rangeYears
		for (let item of this.rangeYears) {
			if (this.timeYear.toString() === item.text.slice(0, -1)) {
				this.selectYear = item.value
			}
		}

	},
	methods: {
		change(e) {
			for (let item of this.rangeYears) {
				if (e === item.value) {
					this.timeYear = item.text.slice(0, -1)
				}
			}
			this.getJiaoFeiData()
			this.getRenShuData()
			this.getSexData()
			this.getEducationxData()
		},
		toDYDetail() {
			this.$common.navigateTo('/pages-dangyuan/dangyuan/dangyuan-detail?year=' + this.timeYear)
		},
		toDYDFCX() {
			this.$common.navigateTo('/pages-dangyuan/dangyuan/dangyuanniandudefen?year=' + this.timeYear)
		},
		getJiaoFeiData() {
			payHomeInfo({
				year: this.timeYear
			}).then(res => {
				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {
					console.log('缴费', res);
					this.dangYuanJiaoFeiList = res;
					this.dangYuanJiaoFeiInfo = res.values;
				}

			}).catch(err => {

				this.$common.errorToShow(err)

			})
		},
		getRenShuData() {
			partyMemberHomeYearInfo({
				year: this.timeYear
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {

					this.dangYuanRenShuInfo = res.values;
				}

			}).catch(err => {

				this.$common.errorToShow(err)

			})
		},
		getSexData() {
			sex({
				year: this.timeYear
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {


					this.sexInfo = res.values;
					let total = this.sexInfo.map(item => item.value).reduce((prev, cur) => prev + cur);

					this.sexInfo.forEach(item => {
						item.name = item.key
						const perValue = Number(item.value / total) * 100
						item.perCent = parseFloat(perValue).toFixed(0) + '%'
						item.labelText = item.name + ':' + item.value + '人' + '占比' + item.perCent
					})
				}

			}).catch(err => {

				this.$common.errorToShow(err)

			})
		},

		getEducationxData() {
			education({
				year: this.timeYear
			}).then(res => {

				if (res.errors.length > 0) {
					uni.showToast({
						title: res.errors,
						icon: 'none',
						duration: 2000,
					});
				} else {


					this.educationInfo = res.values;
					let total = this.educationInfo.map(item => item.value).reduce((prev, cur) => prev + cur);

					this.educationInfo.forEach(item => {
						item.name = item.key
						const perValue = Number(item.value / total) * 100
						item.perCent = parseFloat(perValue).toFixed(0) + '%'
						item.labelText = item.value + '人' + '占比' + item.perCent
					})
				}

			}).catch(err => {

				this.$common.errorToShow(err)

			})
		},


	}
}
</script>

<style lang="scss" scoped>
.image-box {
	width: 100%;
	height: 100%;
}

.continer {
	position: relative;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100vw;
	background: #F6F6F6;


	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 400rpx;
		background: linear-gradient(180deg, #d79557, #dfbc92);
		z-index: 0;
	}

	.continer-inenr {
		position: relative;
		padding: 0 32rpx 60rpx;
		box-sizing: border-box;
		overflow: hidden;

		.card-box-1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 200rpx;
			width: 686rpx;
			height: 388rpx;
			background: linear-gradient(180deg, #ffecd1, #ffffff);
			border: 3rpx solid #ffffff;
			border-radius: 16rpx;
			box-sizing: border-box;

			.icon-box {
				margin-top: 46rpx;
				width: 96rpx;
				height: 96rpx;
				box-sizing: border-box;
			}

			.title {
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #333333;
				font-weight: 600;
			}

			.list {
				margin-top: 48rpx;
				display: flex;
				width: 100%;

				.item {
					position: relative;
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					border-left: 4rpx solid #eaeaea;

					&:first-child {
						border-left: none;
					}

					&.item-icon {
						.num-icon {
							display: flex;
							align-items: center;

							.num {
								font-size: 36rpx;
								color: #1b263c;
							}

							.icon {
								margin-left: 8rpx;
								color: #e4c59f;
								font-size: 34rpx;
							}
						}
					}

					.num {
						font-size: 36rpx;
						color: #1b263c;
					}

					.text {
						margin-top: 16rpx;
						color: #999da5;
					}
				}
			}
		}

		.card-box-2 {
			.card-content {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				height: 130rpx;
				background: #f6f6f6;
				padding: 0 40rpx;
				box-sizing: border-box;

				.left-box {
					flex: 1;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					border-right: 4rpx solid #eaeaea;
					;

					.icon-box {
						width: 76rpx;
						height: 80rpx;
					}

					.msg {
						margin-left: 24rpx;

						.num {
							font-size: 32rpx;
							font-weight: 600;
						}
					}
				}


				.right-box {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					box-sizing: border-box;
					// padding-left: 46rpx;

					.msg {
						display: flex;
						justify-content: space-between;
						margin-left: 46rpx;

						.num {
							font-size: 28rpx;
							font-weight: 600;
						}

						&:nth-child(2) {
							margin-top: 16rpx;

							.num {
								color: #FF6430;
							}
						}
					}
				}
			}
		}

		.card-box-3 {
			.card-inner-box {
				.list {
					.header-box {
						display: flex;
						width: 100%;
					}
				}
			}
		}

		.card-box-4 {
			margin-top: 20rpx;
			width: 686rpx;
			height: 570rpx;
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0rpx 2rpx 6rpx rgba(0, 0, 0, 0.1);
		}
	}
}
</style>